<template>
  <div :class="className" :id="id" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null,
      data: {
        'name': '票据管理',
        'children': [
          {
            'name': '直连票据管理',
            // 三级
            'children': [
              {
                'name': '开票',
                'children': [
                  { 'name': '电子开票', 'value': 3938 },
                  { 'name': '提示收票', 'value': 3812 },
                  { 'name': '撤销申请', 'value': 6714 }
                ]
              },
              {
                'name': '背书转让'
              },
              {
                'name': '通用撤回'
              },
              {
                'name': '电子签收'
              },
              {
                'name': '贴现',
                children: [
                  { 'name': '体现申请' },
                  { 'name': '贴现赎回' }
                ]
              },
              {
                'name': '质押',
                children: [
                  { 'name': '质押申请' },
                  { 'name': '解除质押' }
                ]
              }
            ]
          },
          {
            'name': '非直连票据管理',
            'children': [
              { 'name': '非直连开票管理', 'value': 17010,
                'children': [
                  { 'name': '开票登记',
                    'children': [
                      { 'name': '手工登记票据' }
                    ]
                  },
                  { 'name': '兑付' }
                ]
              },
              {
                'name': '非直连收票管理',
                'children': [
                  { 'name': '手工收票登记', 'value': 1983 },
                  { 'name': '入库申请', 'value': 2047 },
                  { 'name': '退票申请', 'value': 1375 },
                  { 'name': '背书转让', 'value': 8746 },
                  { 'name': '托收管理', 'value': 2202 },
                  { 'name': '贴现管理',
                    'children': [
                      { 'name': '贴现申请' },
                      { 'name': '贴现办理' },
                      { 'name': '贴现到账' },
                      { 'name': '贴现赎回申请' },
                      { 'name': '贴现赎回' }
                    ]
                  },
                  { 'name': '质押管理', 'value': 1629,
                    'children': [
                      { 'name': '质押申请' },
                      { 'name': '质押办理' },
                      { 'name': '解除质押' }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.initChart()
  },
  /* beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },*/
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',

            data: [this.data],
            layout: 'orthogonal',
            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',
            orient: 'TB',
            symbolSize: 7,
            symbol: 'roundRect',
            label: {
              normal: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                fontSize: 9
              }
            },
            lineStyle: {
              curveness: 0.8
            },
            leaves: {
              label: {
                normal: {
                  position: 'right',
                  verticalAlign: 'middle',
                  align: 'left'
                }
              }
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      })
    }
  }
}
</script>

<style scoped>

</style>
